<style lang="less">
  .message-template{

  }
</style>

<template>
    <div class="message-template">
      <ue-search-bar v-model="searchFilters" :data="querys" ref="ueSearchBar">
      </ue-search-bar>

      <el-col :span="24" style="padding-bottom: 10px;">
        <el-button type="primary" @click="addClick">创建模板</el-button>
        <el-button type="primary" style="float: right" @click="reset">重置</el-button>
        <el-button type="primary" style="float: right;margin-right: 10px" @click="search">查询</el-button>
      </el-col>
      <!--列表-->
      <el-table :data="tableData" highlight-current-row border v-loading="listLoading" style="width: 100%;">
        <el-table-column type="index" width="55">
        </el-table-column>
        <el-table-column prop="id" label="模板ID" width="270">
        </el-table-column>
        <el-table-column prop="sceneName" label="场景类型" width="100">
        </el-table-column>
        <el-table-column prop="nodeName" label="业务节点" width="100">
        </el-table-column>
        <el-table-column prop="type" label="模板类型" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.type ==='FIXED'">固定模板</div>
            <div v-else>临时模板</div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="模板标题" width="130">
        </el-table-column>
        <el-table-column prop="content" label="模板内容">
        </el-table-column>
        <el-table-column prop="effectiveStartTime" label="有效时间" width="290">
          <template slot-scope="scope">
            {{scope.row.effectiveStartTime}} - {{scope.row.effectiveEndTime}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="60">
          <template slot-scope="scope">
            <div v-if="scope.row.status ==='ENABLE'">启用</div>
            <div v-else>禁用</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230">
          <template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.status ==='DISABLE'" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="success" v-if="scope.row.status ==='DISABLE'"  @click="handleEnable(scope.row.id)">启用</el-button>
            <el-button type="warning" v-if="scope.row.status ==='ENABLE'"  @click="handleDisable(scope.row.id)">禁用</el-button>
            <el-button type="danger" v-if="scope.row.status ==='DISABLE'"  @click="handleDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentPageChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="float: right">
        </el-pagination>
      </el-col>
      <message-template-add ref="messageTemplateAdd" @comfirmSuccess="comfirmSuccess"></message-template-add>
    </div>
</template>

<script>
import {
  getAllMessageTemplates,
  updateMessageTemplate,
  deleteMessageTemplate,
  enableMessageTemplate,
  disableMessageTemplate
} from '../../api/v3/MessageTemplate';
import MessageTemplateAdd from './MessageTemplateAdd.vue';
export default {
  components: {MessageTemplateAdd},
  name: 'message-template',
  data () {
    return {
      searchFilters: {},
      tableData: [],
      listLoading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    comfirmSuccess (o) {
      updateMessageTemplate(o).then(res => {
        this.$refs.messageTemplateAdd.hide();
        this.loadTableData();
      });
    },
    addClick () {
      this.$refs.messageTemplateAdd.show();
    },
    reset () {
      this.$refs.ueSearchBar.reset();
    },
    search () {
      this.loadTableData(this.$ue.objToFilter(this.searchFilters));
    },
    handleSizeChange (size) {
      this.pageSize = size;
      this.search();
    },
    handleCurrentPageChange (page) {
      this.currentPage = page;
      this.search();
    },
    handleEdit (index, row) {
      this.$refs.messageTemplateAdd.show(row);
    },
    handleEnable (id) {
      this.$confirm('您确认开启该模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enableMessageTemplate(id).then(res => {
          this.$message.success('启用成功!');
          this.search();
        });
      }).catch(() => {});
    },
    handleDisable (id) {
      this.$confirm('您确认禁用该模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disableMessageTemplate(id).then(res => {
          this.$message.success('禁用成功!');
          this.search();
        });
      }).catch(() => {});
    },
    handleDel (id) {
      this.$confirm('您确认删除该模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMessageTemplate(id).then(res => {
          this.$message.success('删除成功!');
          this.search();
        });
      }).catch(() => {});
    },
    loadTableData (filters = '') {
      this.listLoading = true;
      getAllMessageTemplates({
        sort: 'createdDate,desc',
        page: this.currentPage - 1,
        size: this.pageSize,
        filters: filters
      }).then(res => {
        this.listLoading = false;
        this.tableData = res.data;
        this.total = parseInt(res.headers['x-total-count']);
      });
    }
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#default'] || [];
    }
  },
  mounted () {
    this.loadTableData();
  }
};
</script>
